import React, { useState, useEffect } from "react"
import { useNavigate } from "react-router-dom"
import type { DatePickerProps } from "antd"
// 订单列表
import { Card, Form, Input, Button, Select, DatePicker, Table } from "antd"
import { SearchOutlined } from "@ant-design/icons"
import { statisticalData } from "@api/order"
const Index = () => {
  const navigate = useNavigate()
  // 自请求渲染状态
  let [data, setState] = useState<any>([])
  // 分页状态
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [total, setTotal] = useState()
  // 表格加载中
  const [loading, setLoading] = useState(false)
  // 表单
  const [form] = Form.useForm()
  const { Option } = Select
  const DatePick: any = DatePicker

  // 挂载
  useEffect(() => {
    const xxx = async () => {
      const data = await statisticalData(page, pageSize, {})
      setState(data.records)
      setTotal(data.total) // 修改总数
    }
    xxx()
  }, [])

  // 分页器
  const paging = async (page: number, pageSize: number, list?: any) => {
    setLoading(true) // 加载中
    const data = await statisticalData(page, pageSize, list) // 获取数据
    setPage(page) // 修改当前页面
    setPageSize(pageSize) // 修改当前页面数据条数
    // 根据响应数据,修改total,动态渲染表格
    setState(data.records) // 渲染页面
    setTotal(data.total) // 修改总数
    setLoading(false)
  }
  /* 
userId:会员id
outTradeNo：订单交易号
patientId：就诊人id
patientName：就诊人
keyword：医院名称
orderStatus：订单状态
reserveDate：安排日期
createTimeBegin	：创建日期
 */
  // 查找
  const onFinish = async (values: any) => {
    console.log(values)

    data = await paging(1, pageSize, values)
    // console.log(data)
  }
  const columns: any = [
    {
      title: "序号",
      width: 64,
      render: (_x: any, _y: any, index: number) => {
        return index + 1
      },
    },
    {
      title: "订单交易号",
      width: 154.5,
      dataIndex: "outTradeNo",
    },
    {
      title: "医院名称",
      width: 124,
      dataIndex: "hosname",
    },
    {
      title: "科室名称",
      dataIndex: "depname",
    },
    {
      title: "医生职称",
      dataIndex: "title",
    },
    {
      title: "安排时间",
      dataIndex: "fetchTime",
    },
    {
      title: "就诊人",
      dataIndex: "patientName",
    },
    {
      title: "预约号序",
      dataIndex: "patientId",
    },
    {
      title: "服务费(元)",
      dataIndex: "amount",
    },
    {
      title: "订单状态",
      render: (text: any) => {
        return text.param.orderStatusString
      },
    },
    {
      title: "创建时间",
      dataIndex: "updateTime",
    },
    {
      title: "操作",
      // width: 300
      render: (text: any) => (
        <Button
          type="primary"
          onClick={() => {
            console.log()
            navigate(`/syt/order/orderInfo/show/${text.id}`)
          }}
        >
          查看
        </Button>
      ),
    },
  ]
  return (
    <Card>
      <Form
        form={form}
        layout="inline"
        onFinish={onFinish}
        style={{ marginBottom: 10 }}
      >
        <Form.Item name="hosname" style={{ marginBottom: 20 }}>
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item name="outTradeNo" style={{ marginBottom: 20 }}>
          <Input placeholder="订单号" />
        </Form.Item>
        <Form.Item name="patientName" style={{ marginBottom: 20 }}>
          <Input placeholder="就诊人姓名" />
        </Form.Item>
        {/* 开始日期，结束日期，就诊时间 */}

        <Form.Item name="createTimeBegin">
          <DatePick placeholder="选择开始日期" />
        </Form.Item>

        <Form.Item name="createTimeEnd">
          <DatePick placeholder="选择截止日期" />
        </Form.Item>
        <Form.Item name="reserveDate">
          <DatePick placeholder="选择就诊时间" />
        </Form.Item>

        <Form.Item name="hostype" style={{ marginBottom: 20 }}>
          <Select placeholder="订单状态" style={{ width: 200 }}>
            {/* 具体数据写在这里，需要发送请求获取，使用 <Option>包裹可以渲染到下拉列表 */}
            <Option>预约成功，待支付</Option>
            <Option>已支付</Option>
            <Option>已取号</Option>
            <Option>取消预约</Option>
          </Select>
        </Form.Item>

        <Form.Item style={{ marginBottom: 20 }}>
          <Button
            type="primary"
            htmlType="submit"
            icon={<SearchOutlined />}
            className="hospital-btn m"
            style={{ marginRight: 8 }}
          >
            查询
          </Button>
          <Button
            onClick={() => {
              form.resetFields() // 清空form列表
              paging(1, pageSize, {})
            }}
          >
            清空
          </Button>
        </Form.Item>
      </Form>

      {/* 列表 */}
      <Table
        loading={loading}
        columns={columns}
        dataSource={data}
        // 添加key
        rowKey="id"
        // 允许表格出现滚动条
        scroll={{ x: 1500 }}
        // 设置表格边框
        bordered
        // 分页器
        pagination={{
          current: page,
          // 指定每页显示多少条
          pageSize,
          //总共有多少数据， 会根据传入的total计算页数，一页默认十条
          total,

          // 展示动态修改一页多少条数据
          showSizeChanger: true,

          // 指定每页可以显示多少条数据
          pageSizeOptions: ["2", "5", "8"],

          // 是否可以跳转至某页
          showQuickJumper: true,

          // 显示总数据量
          showTotal: (total) => {
            return `总共${total}条`
          },
          // 切换页面及pagesize发生改变时发送请求修改页码
          onChange: paging,
        }}
      />
    </Card>
  )
}

export default Index
